<template>
  <div class="page has-navbar" v-nav="{title: '产品详情',showBackButton: true, onBackButtonClick: back }">
    <div class="page-content" ref="container">
  
      <div style="position:fixed;width:100%;padding-top:0.4rem;" ref="header_mask">
        <div class="header_mask" :style='{"background-color": `rgba(255, 255, 255, ${pha})`}'></div>
        <p v-if="data.title" class="title">
          {{ data.title}}
        </p>
        <p v-if="data.time" :class='[actice ? "title" : "time",data.title]' :style='{fontSize: !data.title ? "1.5rem" : "" }'>
          {{data.time|formateTime}}
        </p>
      </div>
  
      <div class="ql-container ql-snow cover_bottom" style="position:absolute;width:100%;top:12rem;">
        <div class="ql-editor">
          <div v-html="data.brief">
            <!-- {{data.work}} -->
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
  .header_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .title {
    /* margin:0; */
    height: 5rem;
    font-size: 3rem;
    line-height: 5rem;
    text-align: center;
    text-shadow: 0px -5px 8px rgba(144, 144, 144, 0.49);
  }
  
  .time {
    /* margin:0; */
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    font-size: 1rem;
    color: #909090
  }
  
  .cover_bottom {
    position: fixed;
    background-color: #ffff;
    box-shadow: 0px 3px 32px #888888
  }
</style>

<script>
  // const scrollDirection = require('scroll-direction');
  // import vue-gesture from "vue2-gesture"
  export default {
    data() {
      return {
        a: "",
        data: "",
        bcolor: 'red',
        pha: 0
      }
    },
    comments: ["vue-gesture"],
    mounted() {
  
      console.log("mounted");
      this.$nextTick(() => {
        // console.log("window", window)
        // scrollDirection(this.$refs.container, direction => (console.log("direction", direction)));
        // let pre_scroll = 0;
        // const header_mask = parseInt(getComputedStyle(this.$refs.header_mask).height.replace("px", ""));
        // console.log('header_mask',header_mask)
        // console.log(getComputedStyle(this.$refs.header_mask))
        //this.$refs.container.addEventListener("scroll", (e) => {
        //  console.log("scroll",e.target.scrollTop)
        //  if()
        // console.log(header_mask,e.target.scrollTop)
        // let dir = pre_scroll > e.target.scrollTop ? 1 : -1;
        // console.log("dir",dir)
        //this.pha = 0.05 * dir + this.pha;
        //pre_scroll = header_mask, e.target.scrollTop;
  
        //})
      })
    },
    mounted() {
      console.log("mountdfdsfdsfds")
      // console.log( $route.params.id)
      this.data = JSON.parse(sessionStorage.getItem("WorkD"))
      console.log("WorkD",this.data)
      // console.log("data",this.data)
    },
    methods: {
      handleComponent(e) {
        console.log(e)
      },
      back() {
        // this
       
        // history.back();
        $router.back("/WorkDetail/"+ $router.history.current.params.id)
      }
    }
  }
</script>
